<template>
	<view class="home-container">
		<view class="usercenter-head">
			<view class="avatar">
				<img :src="userInfo.avatar" class="avatar-img" />
			</view>
			<view v-if="userInfo.nickname" class="nickname">{{userInfo.nickname}}</view>
			<view v-if="!userInfo.nickname" class="nickname" @click="loginHanle">请登录</view>

		</view>
		<view class="weixin-container">
			<h3>扫码添加微信客服</h3>
			<view class="friend-img">
				<img :src="configInfo.wxfriend" />
			</view>
			<view class="friend-number">{{configInfo.weixin}}</view>

		</view>
	</view>
	<FootTabs></FootTabs>

</template>

<script setup lang="ts">
	import { reactive, ref, getCurrentInstance } from 'vue'
	import { getAvatar, getNickname, initConfig, saveUserinfo } from '@/utils/common';
	import { checkPlatform } from '@/utils/utils'
	import { onLoad, onShow } from "@dcloudio/uni-app"
	const configInfo : any = reactive({ wxfriend: '/static/wx_friend.png', weixin: '' })

	const userInfo : any = reactive({ avatar: uni.getStorageSync('avatar'), nickname: uni.getStorageSync('nickname') })
	const bigTitle = ref();
	const smallTitle = ref();

	const getConfig = async () => {
		const { data } = await initConfig();
		configInfo.wxfriend = data?.weixin_img || '/static/wx_friend.png'
		configInfo.weixin = data?.weixin
		const homeTitles = data?.home_title?.split(',');
		bigTitle.value = homeTitles?.[0];
		smallTitle.value = homeTitles?.[1];
	}

	const loginHanle = () => {
		checkPlatform()
	}

	onLoad(async () => {
		await getConfig();
		const { proxy } : any = getCurrentInstance()
		const newMethod = proxy.$wxShare;
		var url = window.location.protocol + "//" + window.location.host;
		const pages = getCurrentPages();
		const link = url + "/#/" + pages[pages.length - 1].route
		newMethod("", "", link)
	})

	onShow(async () => {
		await saveUserinfo();
		if (!userInfo.avatar || !userInfo.nickname) {
			userInfo.avatar = await getAvatar();
			userInfo.nickname = await getNickname();
		}
	})
</script>

<style lang="scss" scoped>
	.usercenter-head {
		margin-top: 10rpx;
		padding: 0 50rpx;
		display: flex;
		align-items: center;

		.avatar {
			.avatar-img {
				width: 148rpx;
				height: 148rpx;
				border-radius: 100%;
			}
		}

		.nickname {
			margin-left: 42rpx;
			font-size: 32rpx;
			color: #333
		}
	}

	.weixin-container {
		display: flex;
		flex-wrap: wrap;
		text-align: center;
		flex-direction: column;
		margin-top: 100rpx;

		h3 {
			color: #333
		}

		.friend-img {
			margin: 2rem 0 1rem;

			img {
				max-width: 100%;
			}
		}

		.friend-number {
			color: #999
		}

	}
</style>